import React, { Component } from 'react'

import { Form, Input, Button, Checkbox } from 'antd'
import { connect } from 'react-redux'
import { login } from 'store/user/actionCreators'
const mapStateToProps = ()=>{
  return {}
}
const mapDispatchToProps = (dispatch)=>{
  return {
    doLogin:(params)=>{
      dispatch(login(params))
    }
  }
}
@connect(mapStateToProps, mapDispatchToProps)
class Login extends Component {
  render() {
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const tailLayout = {
      wrapperCol: { offset: 4, span: 20 },
    };

    return (
       <Form
            {...layout}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={this.login}
            
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>
      
            <Form.Item
              label="密码"
              name="pwd"
              rules={[{ required: true, message: 'Please input your password!' }]}
            >
              <Input.Password />
            </Form.Item>
      
            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>Remember me</Checkbox>
            </Form.Item>
      
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        
    )
  }
  login = (params)=>{
    this.props.doLogin(params)
  }
}


export default Login